<template>
	<div class="container" ref="refContainer">
		<div class="doc-content">
			<div class="title">
				Toast提示
			</div>
			<div class="sub-title quote">
				由于这是一个API组件，应使用API的方式来调用
			</div>
			
			<div class="example-title">引入方式（按需）</div>
			<code-view>
				<template slot="code-js">{{ jsCode1 }}</template>
			</code-view>
			
			<div class="example-title">基本用法</div>
			<code-view>
				<template slot="code-html">{{ htmlCode2 }}</template>
				<template slot="code-js">{{ jsCode2 }}</template>
			</code-view>
			
			<div class="example-title">show方法（多参数）</div>
			<div class="example-sub-title quote">
				你知道的，这种方式传参，好处是方便快捷，缺点是参数顺序固定，且中间的参数不可或缺
			</div>
			<code-view>
				<template slot="code-js">this.$toast.show('这是一个吐司提示', 1000, 'top') </template>
			</code-view>
			
			<div class="example-title">show方法（json单参数）</div>
			<div class="example-sub-title quote">
				跟上面的方式相比，它们的优缺点是刚好相反的，适合在多个参数自定义时使用
			</div>
			<code-view>
				<template slot="code-js">{{jsCode3}}</template>
			</code-view>
			
			<div class="example-title">show方法的参数</div>
			<gr-table :width="800" :tableData="propertiesExplain1" textAlign="left">
				<template v-slot="{rowData}">
					<gr-table-column label="参数名称" width="100">
						{{rowData.attrName}}
					</gr-table-column>
					<gr-table-column label="参数说明" width="190">
						{{rowData.introduce}}
					</gr-table-column>
					<gr-table-column label="类型" width="160">
						{{rowData.type}}
					</gr-table-column>
					<gr-table-column label="可选值" width="100">
						{{rowData.optionValues}}
					</gr-table-column>
					<gr-table-column label="默认值" width="100">
						{{rowData.defaultValue}}
					</gr-table-column>
				</template>
			</gr-table>
		</div>
		<div class="demo-view">
			<div ref="refCellPhone" class="cellphone">
				<iframe src="demo.html#/toastdemo" frameborder="0" width="100%" height="100%"></iframe>
			</div>
		</div>
	</div>
</template>

<script>
	
	import Demo from '../components/Demo.vue'
	import CodeView from '../components/CodeView.vue'
	export default {
		components: {
			Demo, CodeView
		},
		data() {
			return {
jsCode1: `import Toast from 'gabriel-ui/es/toast'
Vue.use(Toast)
//当Toast组件被引入时，会自动在Vue的原型上添加$toast对象
//相当于 Vue.prototype.$toast = $toast`,
htmlCode2: `<gr-button color="primary" @click="click">Toast</gr-button>`,
jsCode2: `export default {
	methods: {
		click() {
			this.$toast.show('这是一个吐司提示', 1500)
		}
	}
}
`,
jsCode3: `this.$toast.show({
	message: '这是一个吐司提示', 
	duration: 1000, 
	position: 'top'
})`,
				propertiesExplain1: [
					{
						attrName: 'message',
						introduce: `toast提示的文本内容`,
						type: 'String/Number/Boolen',
						optionValues: '----',
						defaultValue: '----'
					},
					{
						attrName: 'duration',
						introduce: `toast提示停留时长,单位ms（毫秒）`,
						type: 'Number',
						optionValues: '----',
						defaultValue: '2000'
					},
					{
						attrName: 'position',
						introduce: `toast出现的页面位置`,
						type: 'String',
						optionValues: 'top / center / bottom',
						defaultValue: 'center'
					},
					{
						attrName: 'beforeToast',
						introduce: `toast提示开始的钩子函数`,
						type: 'Function',
						optionValues: '----',
						defaultValue: 'null'
					},
					{
						attrName: 'afterToast',
						introduce: `toast提示结束的钩子函数`,
						type: 'Function',
						optionValues: '----',
						defaultValue: 'null'
					}
				]
			}
		},
		mounted() {
			let ele = this.$refs.refCellPhone
			this.$refs.refContainer.addEventListener('scroll', (e)=> {
				ele.style.top = e.target.scrollTop + 'px';
			})
		},
		methods: {
			click(e) {
				this.$toast.show('这是一个吐司提示', 1000)
			}
		}
	}
</script>

<style lang="scss">
	
</style>
